        .clockBox {
            /* width: 40%; */
            height: 100%;
            aspect-ratio: 1 / 1;
            /* 设置宽高比 */
            /* background-color: pink; */
            display: flex;
            justify-content: center;
            align-items: center;
            float: left;
        }

        #clock {
            width: 80%;
            height: 80%;
            border: 0.5vw solid #aa568f;
            border-radius: 50%;
            /* position: relative; */
            /* margin: 100px auto; */
            background-color: #f0f0f0;
            transform: rotate(90deg);
        }

        .hour,
        .minute,
        .second {
            position: absolute;
            width: 50%;
            height: 2px;
            background-color: #333;
            top: 50%;
            transform-origin: 100%;
            transition: transform 0.5s ease-in-out;
        }

        .hour {
            background-color: hsl(0, 0%, 20%);
            transform: rotate(90deg);
        }

        .minute {
            background-color: #22ff67;
            transform: rotate(180deg);
        }

        .second {
            background-color: #ff0000;
            transform: rotate(270deg);
        }

        .center-dot {
            width: 0.5vw;
            height: 0.5vw;
            background-color: #333;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }